<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="connect">
<style>
    .directory-content2 {
        position: relative;
        z-index: 0;
        max-width: 720px;
        margin-right: 100px !important;
        margin-left: auto !important;
        text-align: right;
    }

    #directory2 {
        position: fixed;
        z-index: 0;
        top: 285px;
        display: inline-block;
        text-align: left;
        width: 100px;
        height: 200px;
        background-color: #ead0d0;
        border-radius: 280px 50px 50px 280px;
        box-shadow: inset 0px 0px 50px #fff, inset 10px 0px 80px #f0f, inset -10px 0px 80px #0ff, inset 0px 0px 150px #f3e4e6, inset -10px 0px 150px #0ff, 0px 0px 50px #fff, -10px 0px 50px #f0f, 10px 0px 50px #0ff;
    }

    .directory2 {
        position: fixed;
        z-index: 0;
        top: 285px;
        display: inline-block;
        text-align: left;
        width: 100px;
        height: 200px;
        background-color: #ead0d0;
        border-radius: 280px 50px 50px 280px;
        box-shadow: inset 0px 0px 50px #fff, inset 10px 0px 80px #f0f, inset -10px 0px 80px #0ff, inset 0px 0px 150px #f3e4e6, inset -10px 0px 150px #0ff, 0px 0px 50px #fff, -10px 0px 50px #f0f, 10px 0px 50px #0ff;
    }

    .back-top {
        position: relative;
        display: block;
        cursor: pointer;
        height: 30px;
        background-color: #f6f9fa;
        border: 1px solid #e5e9ef;
        border-top: none;
        overflow: visible;
        border-radius: 4px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        width: 50px;
        text-align: center;
        line-height: 43px;
    }

    .weixin {
        position: relative;
        display: block;
        cursor: pointer;
        height: 60px;
        background-color: #f6f9fa;
        border: 1px solid #e5e9ef;
        border-top: none;
        overflow: visible;
        border-radius: 4px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        width: 60px;
        text-align: center;
        line-height: 30px;
    }

    .icon {
        display: inline-block;
        background-image: url('/user/img/icons.png');
    }

    .back-top i {
        background-position: -663px -89px;
        height: 18px;
        width: 19px;
        transform: scale(.7);
    }

    .weixin i {
        background-position: -1090px -65px;
        height: 60px;
        width: 60px;
        transform: scale(.7);
    }

    .back-top:hover {
        background-color: #00a1d6;
        border-color: #00a1d6;
    }

    .elevator-module {
        z-index: 999;
        position: fixed;
        right: 15px;
        bottom: 120px;
        display: block;
        transition: top .3s;
    }

    .photo-weixin {
        position: fixed;
        display: none;
        width: 200px;
        height: 200px;
        left: 83%;
        top: 490px;
        transition: top .3s;
        border: 1px solid #a2ffad;
    }

    .photo-weixin img {
        width: 100%;
        height: 100%;
        background-size: cover;
    }
</style>
<body>
<!--<div id="directory-content2" class="directory-content2">-->
<!--    <div id="directory2">-->
<!--        <div style="padding-bottom:5px;padding-left:11px;padding-top: 40px;">-->
<!--            <b>客服1QQ:</b>-->
<!--            <a href="tencent://message/?uin=1343691474" target="_blank">-->
<!--                <img alt="message" src="/user/img/qq.jpg" width="30px"-->
<!--                     height="30px" align="absMiddle" border="0"/>QQ交谈</a>-->
<!--        </div>-->
<!--        <div style="padding-bottom:5px;padding-left:11px">-->
<!--            <b>客服2QQ:</b>-->
<!--            <a href="tencent://message/?uin=977672987" target="_blank">-->
<!--                <img alt="message" src="/user/img/qq.jpg" width="30px" height="30px" align="absMiddle"-->
<!--                     border="0"/>QQ交谈</a>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div class="elevator-module">
    <div class="weixin icon"><i class="icon"></i></div>
</div>
<div class="photo-weixin">
    <img src="http://image.e0x.top/weixinphoto.jpg"/>
</div>
<script type="text/javascript">
    $(function () {
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $(".back-top").fadeIn(1500);
                } else {
                    $(".back-top").fadeOut(1500);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $(".back-top").click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });
            $(".weixin").mouseover(function () {
                // $(".photo-weixin").css("display", "block");
                $(".photo-weixin").fadeIn(1000);
            });
            $(".weixin").mouseleave(function () {
                // $(".photo-weixin").css("display", "none");
                $(".photo-weixin").fadeOut(1500);
            });
        });
    });
</script>
</body>
</html>